<template>
	<view>
		<unicloud-db v-slot:default="{data, loading, error, options}" collection="wolf-server-center" :where="where" @load="loadData">
			<uni-list>
				<uni-list-item v-for="(item,index) in data" :key="index">
					<template v-slot:body>
						<view class="u-box">
							<view class="section">
								<view class="s-title">{{item.title}}</view>
								<view class="s-body">
									<text>{{item.username}}</text>
									<text>{{item.tel}}</text>
								</view>
								<view class="s-address">
									{{item.address}}
								</view>
							</view>
							<view class="option">
								<uni-icons type="location" color="#de1102" size="30"
									@click="cLocation(item)"></uni-icons>
								<uni-icons type="phone" color="#1ede00" size="30" @click="cTel(item)"></uni-icons>
							</view>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</unicloud-db>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				where:"type==1"
			}
		},
		methods: {
			loadData(data) {
				console.log(data)
			},
			cLocation(data) {
				// console.log(data)
				uni.openLocation({
					latitude: data.location.latitude,
					longitude: data.location.longitude,
					success: function() {
						console.log('success');
					}
				});
			},
			cTel(data) {
				uni.makePhoneCall({
					phoneNumber: data.tel
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	view {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
	}

	.u-box {
		width: 100%;
		flex-direction: row;
	}

	.section {
		width: 500rpx;
		flex-direction: column;
		justify-content: space-between;
		padding: 10rpx;
		font-size: 12px;
	}

	.s-title {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-weight: 700;
		font-size: 14px;
	}

	.s-body {
		flex-direction: row;
		margin: 5px 0;
	}

	.s-address {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.option {
		flex: 1;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		border-left: 1px solid #e1f7e1;
	}
</style>